{% extends 'base.html' %}

{% block contents_inner %}
<div class="col-12">
    <div class="section-content">

        <div class="row">
            <div class="col-sm-12">
                <form action="{% url 'chart:trend_chart_of_no2' %}" method="post">
                    {% csrf_token %}
                    <select id="pollutionSelect" class="form-control" name="pollution">
                        <option value="">请选择污染物</option>
                        <option value="pm2_5">pm2_5</option>
                        <option value="pm10">pm10</option>
                        <option value="co">co</option>
                        <option value="no2">no2</option>
                        <option value="so2">so2</option>
                        <option value="o3">o3</option>
                    </select>
                </form>
            </div>
        </div>

        <div class="row">
            <div class="col-sm-12">
                <div class="content-details" id="pmChart" style="width: 100%; height: 600px;"></div>
            </div>
        </div>

    </div>
</div>

{% endblock %}

{% block js_code %}
<script>
    var myChart = echarts.init(document.getElementById('pmChart'));

    $('#pollutionSelect').change(function() {
        var pollution = $(this).val();
        if (pollution) {
            $.ajax({
                url: '{% url 'chart:AQI_concentration_distribution' %}',
                type: 'post',
                headers: {"X-CSRFToken": $("[name='csrfmiddlewaretoken']").val()},
                data: {'pollution': pollution},
                success: function(data) {
                    var option = {
                        title: {
                            left: 'center',
                            text: pollution + '污染物浓度分布'
                        },
                      xAxis: {
                        type: 'category',
                        data: data.x_data
                      },
                      yAxis: {
                        type: 'value'
                      },
                      series: [
                        {
                          data: data.y_data,
                          type: 'bar',
                          showBackground: true,
                          backgroundStyle: {
                            color: 'rgba(180, 180, 180, 0.2)'
                          }
                        }
                      ]
                    };
                    myChart.setOption(option);
                },
                error: function(error) {
                    console.error('请求数据失败:', error);
                }
            });
        }
    });
</script>
{% endblock %}
